<template>
  <view class="user-edit">
    <uni-card title="编辑用户">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="用户名" name="username">
          <uni-easyinput 
            v-model="formData.username"
            placeholder="请输入用户名"
            disabled
          />
        </uni-forms-item>
        
        <uni-forms-item label="密码" name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="不修改请留空"
          />
        </uni-forms-item>
        
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput
            v-model="formData.email"
            type="email"
            placeholder="请输入邮箱"
          />
        </uni-forms-item>
        
        <uni-forms-item label="手机号" name="phone">
          <uni-easyinput
            v-model="formData.phone"
            type="number"
            placeholder="请输入手机号"
          />
        </uni-forms-item>
      </uni-forms>
      
      <template v-slot:actions>
        <view class="actions">
          <button class="action-btn" @click="handleSubmit" :loading="loading">
            保存
          </button>
          <button class="action-btn cancel" @click="goBack">
            取消
          </button>
        </view>
      </template>
    </uni-card>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      loading: false,
      formData: {
        username: '',
        password: '',
        email: '',
        phone: ''
      },
      rules: {
        email: {
          rules: [{
            required: true,
            errorMessage: '请输入邮箱'
          }, {
            format: 'email',
            errorMessage: '邮箱格式不正确'
          }]
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '请输入手机号'
          }, {
            pattern: /^1[3-9]\d{9}$/,
            errorMessage: '手机号格式不正确'
          }]
        },
        password: {
          rules: [{
            minLength: 6,
            errorMessage: '密码长度不能少于6位'
          }]
        }
      }
    };
  },
  
  onLoad(options) {
    this.userId = options.id;
    this.loadData();
  },
  
  methods: {
    async loadData() {
      try {
        const user = await request({
          url: `/api/users/${this.userId}`
        });
        
        this.formData = {
          username: user.username,
          password: '',
          email: user.email,
          phone: user.phone
        };
      } catch (err) {
        uni.showToast({
          title: '加载用户信息失败',
          icon: 'none'
        });
      }
    },
    
    async handleSubmit() {
      try {
        const valid = await this.$refs.form.validate();
        if (!valid) return;
        
        this.loading = true;
        
        // 如果密码为空，不提交密码字段
        const data = { ...this.formData };
        if (!data.password) {
          delete data.password;
        }
        
        await request({
          url: `/api/users/${this.userId}`,
          method: 'PUT',
          data
        });
        
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
        
      } catch (err) {
        uni.showToast({
          title: err.message || '保存失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style>
.user-edit {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.action-btn {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #007AFF;
  color: #fff;
  min-width: 60px;
}

.action-btn.cancel {
  background-color: #8e8e93;
}
</style> 